<template>
  <div class="table-style">
    <div class="filter-container">
      搜索标题：
      <el-input
        placeholder="请输入搜索标题"
        v-model="listQuery.Name"
        clearable
        style="width: 200px; margin: 0 10px 0 0;"
        class="filter-item"
      />
      搜索关键字：
      <el-input
        placeholder="请输入搜索关键字"
        v-model="listQuery.Key"
        clearable
        style="width: 200px; margin: 0 10px 0 0;"
        class="filter-item"
      />
      <el-button
        style="margin-bottom: 0;"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
      <el-button type="primary" @click="dialogFormVisible = true">
        添加视频
      </el-button>
    </div>
    <el-table
      :data="videoList"
      stripe
      fitv-loading:loading
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      border
      style="width: 100%;"
      v-loading="listLoading"
    >
      <el-table-column width="60" type="index" label="序号"></el-table-column>
      <el-table-column width="250" prop="" label="视频">
        <template slot-scope="scope">
          <video
            v-if="scope.row.Oss != ''"
            class="img-style"
            controls
            :src="scope.row.Oss"
            width="160"
          ></video>
          <img v-else src="/public/addImg.png" min-width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="Name" label="视频标题"></el-table-column>
      <el-table-column width="80" prop="Sort" label="排序"></el-table-column>
      <el-table-column label="设置">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="handleDeleteVideo(scope.row.Id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="GetVideoList"
    />

    <!-- 添加样板间 -->
    <el-dialog
      title="添加视频"
      :visible.sync="dialogFormVisible"
      width="80%"
      v-loading="loading"
      element-loading-text="视频上传中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-form
        :inline="true"
        :model="video"
        :rules="rules"
        ref="video"
        label-width="130px"
      >
        <el-form-item label="视频标题" prop="Name">
          <el-input v-model="video.Name"></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="Sort">
          <el-input v-model="video.Sort"></el-input>
        </el-form-item>
        <el-form-item label="视频">
          <input type="file" accept="video/*" @change="changeVideo($event)" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddVideo('video')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { videoList, addVideo, deleteVideo } from '@/api/mdlist'
export default {
  components: { Pagination },
  data() {
    return {
      videoList: [],
      listLoading: true,
      dialogFormVisible: false,
      total: 0,
      loading:false,
      listQuery: {
        page: 1,
        limit: 20,
        Name: undefined, //搜索内容
        Key: undefined, //关键字
      },
      videoFile: '', //视频
      video: {
        Name: '',
        Sort: 0,
      },

      rules: {
        Name: [
          { required: true, message: '请输入视频标题', trigger: 'blur' },
        ],
        Sort: [{ required: true, message: '请输入排序', rigger: 'blur' }],
      },
    }
  },
  created() {
    this.GetVideoList()
  },
  methods: {
    //视频列表
    GetVideoList() {
      this.listLoading = false
      videoList().then((res) => {
        if (res.msg === 'success' && res.list.length > 0) {
          this.videoList = res.list
        }
      })
    },

    //读取视频上传视频
    changeVideo(e) {
      this.videoFile = e.target.files[0]
    },

    //添加视频
    handleAddVideo(video) {
      this.loading = true
      this.$refs[video].validate((valid) => {
        if (valid) {
          //提交
          let param = new FormData()
          param.append('file', this.videoFile)
          param.append('Name', this.video.Name)
          param.append('Sort', Number(this.video.Sort))
          let _this = this
          addVideo({ 'Content-Type': 'multipart/form-data' }, param).then(
            (res) => {
              if (res.msg === 'success') {
                _this.loading = false
                this.dialogFormVisible = false
                this.GetVideoList()
              }
            },
          )
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    //修改视频
    handleDeleteVideo(videoId) {
      deleteVideo({Id:videoId}).then((res)=> {
        if (res.msg === 'success') {
          this.GetVideoList()
        }
      })
    },
    //搜索视频
    handleSearch() {
      this.listQuery.page = 1
      this.GetVideoList()
    },
  },
}
</script>

<style>
.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.table-style {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.img-style {
  cursor: pointer;
}
</style>
